<template>
  <div>
    <el-row :gutter="5">
      <el-col :xs="24" :sm="12" :md="9" :lg="9" :xl="9">
        <div class="box-card uni-scroll" style="height: calc(100vh - 100px)">
          <el-form :inline="true">
            <el-form-item>
              <el-button
                icon="el-icon-folder-opened"
                type="primary"
                @click="editGroup"
              />
            </el-form-item>
            <el-form-item>
              <product-series-cascade @change="productChange" />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="status"
                style="width: 120px"
                :placeholder="$t('status')"
                @change="statusChange"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="chooseDeviceCoreList.length > 1">
              <el-button
                icon="el-icon-document-copy"
                type="primary"
                @click="dialogAnalysisVisible = true"
              >{{ $t('comparison') }}</el-button>
            </el-form-item>
            <el-form-item v-if="chooseDeviceCoreList.length > 1">
              <el-button
                icon="el-icon-s-tools"
                type="primary"
                @click="dialogCommonSettingVisible = true"
              >{{ $t('setting') }}</el-button>
            </el-form-item>
          </el-form>

          <el-tree
            v-if="afterGroup"
            :props="groupTressList"
            :load="loadGroupDevice"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node" style="width: 600px">
              <span v-if="!data.device">
                <i
                  class="el-icon-cpu"
                  @click.stop="() => addDevice(data)"
                />
                <span>{{ node.label }}</span>
              </span>
              <span v-else style="width: 100%" @click="device = data.device">
                <i
                  class="el-icon-setting"
                  @click="() => deviceSetting(data.device)"
                />
                <i
                  class="el-icon-menu"
                  @click="() => deviceMore(data.device)"
                />
                <app-surplus style="display: inline-block" :device="data.device" />
                <span :class="data.device.status">{{ node.label }}</span>
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="15" :lg="15" :xl="15">
        <div
          class="uni-scroll"
          style="height: calc(100vh - 100px)"
        >
          <sensor-camera-list :device="device" />
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      width="1200px"
      top="15px"
    >
      <device-setting
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogAnalysisVisible"
      top="15px"
      width="90%"
    >
      <device-sensor-analysis v-if="dialogAnalysisVisible" :device-core-list="chooseDeviceCoreList" />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogCommonSettingVisible"
      destroy-on-close
      width="1400px"
      top="15px"
    >
      <device-list-setting
        :device-core-list="chooseDeviceCoreList"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="deviceFormVisible"
      top="15px"
    >
      <user-device-choice :user-id="userId" :group-id="groupTd" />
    </el-dialog>

  </div>
</template>

<script>
import DeviceSensorAnalysis from '@/components/DeviceSensorAnalysis'
import {
  listDeviceStatus
} from '@/util/common'
import { getSearchDeviceStatus, getUserId, setSearchDeviceStatus } from '@/util/storage'
import { getBelongDeviceList } from '@/api/iot/iotDeviceBelongApi'

import {
  listDeviceBelongGroup
} from '@/api/iot/iotDeviceBelongGroupApi'
import SensorCameraList from '@/components/SensorCameraList'
import DeviceSetting from '@/components/DeviceSetting'
import DeviceListSetting from '@/components/DeviceListSetting'
import ProductSeriesCascade from '@/components/ProductSeriesCascade'
import AppSurplus from '@/components/AppSurplus'
import UserDeviceChoice from './manage/UserDeviceChoice'
export default {
  name: 'GroupModel',
  components: {
    SensorCameraList,
    DeviceSetting,
    AppSurplus,
    ProductSeriesCascade,
    DeviceSensorAnalysis,
    DeviceListSetting,
    UserDeviceChoice
  },
  data() {
    return {
      dialogAnalysisVisible: false,
      dialogCommonSettingVisible: false,
      afterGroup: false,
      groupList: [],
      groupTressList: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      userId: parseInt(getUserId()),
      deviceList: [],
      device: {},
      showSetting: false,
      deviceFormVisible: false,
      productId: null,
      seriesId: null,
      statusList: [],
      status: getSearchDeviceStatus(),
      chooseDeviceCoreList: [],
      groupTd: null
    }
  },
  mounted() {
    this.statusList = listDeviceStatus(this)
    this.listDeviceBelongGroup()
  },
  methods: {
    addDevice(item) {
      console.log(item)
      this.groupTd = item.groupId
      this.deviceFormVisible = true
    },
    editGroup() {
      this.$router.push({
        path: '/device/belong/group/manage'
      })
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
      if (!data.device) {
        return
      }
      const chooseDeviceCoreList = this.chooseDeviceCoreList
      if (checked) {
        chooseDeviceCoreList.push(data.device.deviceCore)
      } else {
        for (let i = 0, j = chooseDeviceCoreList.length; i < j; i++) {
          if (chooseDeviceCoreList[i] === data.device.deviceCore) {
            chooseDeviceCoreList.splice(i, 1)
            break
          }
        }
      }
      this.chooseDeviceCoreList = chooseDeviceCoreList
    },
    statusChange() {
      this.listDeviceBelongGroup()
      setSearchDeviceStatus(this.status)
    },
    productChange(val) {
      this.productId = val.productId
      this.seriesId = val.seriesId
      this.listDeviceBelongGroup()
    },
    deviceSetting(item) {
      this.device = item
      this.showSetting = true
    },
    deviceMore(item) {
      this.device = item
      this.$router.push({
        path: '/device/manage/' + this.device.deviceCore,
        query: {
          deviceCore: this.device.deviceCore,
          deviceName: this.device.deviceName
        }
      })
    },
    loadGroupDevice(node, resolve) {
      console.log(node)
      if (node.level === 0) {
        const groupNodeList = []
        for (const group of this.groupList) {
          let name = group.name
          if (group.address && group.address !== '') {
            name = name + ' [' + group.address + ']'
          }
          groupNodeList.push({
            name: name,
            groupId: group.groupId
          })
        }
        return resolve(groupNodeList)
      }
      const nodeList = []
      listDeviceBelongGroup({
        productId: this.productId,
        parentId: node.data.groupId,
        seriesId: this.seriesId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          for (const group of data) {
            let name = group.name
            if (group.address && group.address !== '') {
              name = name + ' [' + group.address + ']'
            }
            nodeList.push({
              name: name,
              groupId: group.groupId
            })
          }
        }
        getBelongDeviceList({
          userId: this.userId,
          groupId: node.data.groupId,
          productId: this.productId,
          seriesId: this.seriesId,
          status: this.status
        }).then(res => {
          const { code, data } = res
          if (code === '200') {
            for (const belong of data) {
              nodeList.push({
                name: belong.deviceName,
                device: belong,
                leaf: true
              })
            }
            resolve(nodeList)
          } else {
            resolve([])
          }
        })
      })
    },
    listDeviceBelongGroup() {
      this.afterGroup = false
      listDeviceBelongGroup({
        userId: this.userId,
        parentId: -1
      }).then(res => {
        this.chooseDeviceCoreList = []
        const { code, data } = res
        if (code === '200') {
          this.groupList = data
          this.afterGroup = true
        }
      })
    }
  }
}
</script>
